
<script>
export default {
  name: "data",
  data() {
    return {
      activities: [],
      currentPage: 1,
      total: 0,
      pageSize: 5,
      morandiColors: [
        "#FDE2E4", // 淡粉色
        "#BEE3F8", // 淡蓝色
        "#D3EBCD", // 淡绿色
        "#D8BFD8", // 淡紫色
        "#CDB5CD", // 灰紫色
        "#B0C4DE"  // 灰蓝色
      ],
      activityColors: [],
      queryTitle: "",
      queryStatus: "",
      sortOrder: "desc",
    };
  },
  methods: {
    getStatusType(status) {
      const types = {
        0: 'info',
        1: 'success',
        2: 'warning',
        3: 'danger'
      }
      return types[status]
    },

    getStatusText(status) {
      const texts = {
        0: '已创建',
        1: '已发布',
        2: '已结束',
        3: '已删除'
      }
      return texts[status]
    },

    getTimelineItemType(status) {
      const types = {
        0: 'primary',
        1: 'success',
        2: 'warning',
        3: 'danger'
      }
      return types[status]
    },

    formatDate(date) {
      if (!date) return ''
      return new Date(date).toLocaleDateString()
    },

    resetSearch() {
      this.queryTitle = ''
      this.queryStatus = ''
      this.sortOrder = 'desc'
      this.page(1)
    },

    confirmDelete(activity) {
      this.$confirm('确定要删除该活动吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.removeActivity(activity.id)
      }).catch(() => {})
    },
    page(currentPage) {
      // 获取查询条件
      const { queryTitle, queryStatus, sortOrder } = this;

      this.$axios
          .get("/manager-activity/manager-activity/select", {
            params: {
              title: queryTitle,
              status: queryStatus,
              currentPage: currentPage,
              pageSize: this.pageSize,
              sortOrder: sortOrder
            },
            headers: {
              Authorization: localStorage.getItem("token")
            }
          })
          .then((res) => {
            this.activities = res.data.data.records;
            this.activityColors = this.activities.map(() => {
              const randomIndex = Math.floor(Math.random() * this.morandiColors.length);
              return this.morandiColors[randomIndex];
            });
            this.currentPage = res.data.data.current;
            this.total = res.data.data.total;
            this.pageSize = res.data.data.size;
          })
          .catch((err) => {
            console.error("查询失败:", err);
          });
    },
    goToCreateActivity() {
      this.$router.push("/admin/activity/add");
    },
    publishActivity(activityId) {
      this.$axios
          .put(`/manager-activity/activity/${activityId}/publish`, {}, {
            headers: {
              Authorization: localStorage.getItem("token")
            }
          })
          .then(() => {
            this.$alert('活动已发布', '提示', {
              confirmButtonText: '确定',
              callback: () => {
                this.page(this.currentPage);
              }
            });
          })
          .catch((err) => {
            console.error("发布失败:", err);
            this.$alert('发布活动失败', '错误', {
              confirmButtonText: '确定'
            });
          });
    },
    closeActivity(activityId){
      this.$axios
          .put(`/manager-activity/activity/${activityId}/close`, {}, {
            headers: {
              Authorization: localStorage.getItem("token")
            }
          })
          .then(() => {
            this.$alert('活动已关闭', '提示', {
              confirmButtonText: '确定',
              callback: () => {
                this.page(this.currentPage);
              }
            });
          })
          .catch((err) => {
            console.error("关闭失败:", err);
            this.$alert('关闭活动失败', '错误', {
              confirmButtonText: '确定'
            });
          });
    },
    removeActivity(activityId) {
      this.$axios
          .put(`/manager-activity/activity/${activityId}/remove`, {}, {
            headers: {
              Authorization: localStorage.getItem("token")
            }
          })
          .then(() => {
            // 删除成功后，更新活动列表
            this.activities = this.activities.filter(activity => activity.id !== activityId);

            this.$alert('活动已删除', '提示', {
              confirmButtonText: '确定',
              callback: () => {
                // 你也可以在这里调用分页函数，如果你希望在删除后重新加载当前页的数据
                // this.page(this.currentPage);
              }
            });
          })
          .catch((err) => {
            console.error("删除失败:", err);
            this.$alert('删除活动失败', '错误', {
              confirmButtonText: '确定'
            });
          });
    }

  },
  created() {
    this.page(1);
  }
};
</script>


<template>
  <div class="data-center">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :span="8">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon">
            <i class="el-icon-data-line"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">总活动数</div>
            <div class="stat-value">{{ total }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon">
            <i class="el-icon-timer"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">进行中活动</div>
            <div class="stat-value">{{ activities.filter(a => a.status === 1).length }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-icon">
            <i class="el-icon-finished"></i>
          </div>
          <div class="stat-info">
            <div class="stat-title">已结束活动</div>
            <div class="stat-value">{{ activities.filter(a => a.status === 2).length }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 搜索区域 -->
    <el-card class="search-section" shadow="never">
      <div class="search-header">
        <h2>活动管理</h2>
        <el-button type="primary" @click="goToCreateActivity" class="create-btn">
          <i class="el-icon-plus"></i> 创建活动
        </el-button>
      </div>
      <el-form :inline="true" class="search-form">
        <el-form-item>
          <el-input
              v-model="queryTitle"
              placeholder="搜索活动名称"
              prefix-icon="el-icon-search"
              clearable
          />
        </el-form-item>
        <el-form-item>
          <el-select
              v-model="queryStatus"
              placeholder="活动状态"
              clearable
              class="custom-select"
          >
            <el-option label="已创建" value="0">
              <i class="el-icon-edit status-icon"></i> 已创建
            </el-option>
            <el-option label="已发布" value="1">
              <i class="el-icon-upload status-icon"></i> 已发布
            </el-option>
            <el-option label="已结束" value="2">
              <i class="el-icon-circle-check status-icon"></i> 已结束
            </el-option>
            <el-option label="已删除" value="3">
              <i class="el-icon-delete status-icon"></i> 已删除
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
              v-model="sortOrder"
              placeholder="排序方式"
              class="custom-select"
          >
            <el-option label="最新优先" value="desc" />
            <el-option label="最早优先" value="asc" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="page(1)">
            <i class="el-icon-search"></i> 搜索
          </el-button>
          <el-button @click="resetSearch">
            <i class="el-icon-refresh"></i> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 活动列表 -->
    <el-card class="activity-list" shadow="never">
      <el-timeline>
        <el-timeline-item
            v-for="(activity, index) in activities"
            :key="activity.id"
            :timestamp="activity.created"
            :type="getTimelineItemType(activity.status)"
        >
          <el-card
              class="activity-card"
              :class="{ 'activity-card-hover': true }"
              :body-style="{ padding: '0' }"
          >
            <div class="activity-content" :style="{ backgroundColor: activityColors[index] }">
              <div class="activity-main">
                <div class="activity-header">
                  <router-link
                      :to="`/admin/activity/${activity.id}`"
                      class="activity-title"
                  >
                    {{ activity.title }}
                  </router-link>
                  <el-tag
                      :type="getStatusType(activity.status)"
                      size="small"
                      class="status-tag"
                  >
                    {{ getStatusText(activity.status) }}
                  </el-tag>
                </div>
                <div class="activity-meta">
                  <span class="creator">
                    <i class="el-icon-user"></i>
                    {{ activity.creator }}
                  </span>
                  <span class="created-time">
                    <i class="el-icon-time"></i>
                    {{ formatDate(activity.created) }}
                  </span>
                </div>
                <div class="activity-abstract">{{ activity.abstract1 }}</div>
                <div class="action-buttons">
                  <el-button
                      v-if="activity.status === 0"
                      type="primary"
                      size="small"
                      @click="publishActivity(activity.id)"
                  >
                    <i class="el-icon-upload"></i> 发布
                  </el-button>
                  <el-button
                      v-if="activity.status === 1"
                      type="warning"
                      size="small"
                      @click="closeActivity(activity.id)"
                  >
                    <i class="el-icon-turn-off"></i> 关闭
                  </el-button>
                  <el-button
                      v-if="activity.status !== 3"
                      type="danger"
                      size="small"
                      @click="confirmDelete(activity)"
                  >
                    <i class="el-icon-delete"></i> 删除
                  </el-button>
                </div>
              </div>
              <div class="activity-image" v-if="activity.picUrls">
                <el-image
                    :src="activity.picUrls"
                    fit="cover"
                    :preview-src-list="[activity.picUrls]"
                />
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
            v-if="total > 0"
            background
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next, jumper"
            @current-change="page"
        />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.data-center {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: 100vh;

  .stat-cards {
    margin-bottom: 24px;

    .stat-card {
      display: flex;
      align-items: center;
      padding: 20px;
      transition: all 0.3s;
      border-radius: 8px;
      border: none;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
      }

      .stat-icon {
        font-size: 48px;
        color: #409EFF;
        margin-right: 20px;
      }

      .stat-info {
        .stat-title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }

  .search-section {
    margin-bottom: 24px;
    border-radius: 8px;

    .search-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 500;
      }

      .create-btn {
        padding: 12px 24px;
      }
    }

    .search-form {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }
  }

  .activity-list {
    border-radius: 8px;

    .activity-card {
      margin-bottom: 16px;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }

      .activity-content {
        display: flex;
        padding: 20px;
        gap: 24px;

        .activity-main {
          flex: 1;

          .activity-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;

            .activity-title {
              font-size: 18px;
              font-weight: 500;
              color: #303133;
              text-decoration: none;

              &:hover {
                color: #409EFF;
              }
            }
          }

          .activity-meta {
            color: #909399;
            font-size: 14px;
            margin-bottom: 12px;

            span {
              margin-right: 16px;

              i {
                margin-right: 4px;
              }
            }
          }

          .activity-abstract {
            color: #606266;
            margin-bottom: 16px;
            line-height: 1.6;
          }

          .action-buttons {
            display: flex;
            gap: 8px;
          }
        }

        .activity-image {
          width: 160px;
          height: 160px;
          border-radius: 8px;
          overflow: hidden;

          .el-image {
            width: 100%;
            height: 100%;
            transition: all 0.3s;

            &:hover {
              transform: scale(1.05);
            }
          }
        }
      }
    }
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
}

// 状态标签样式
.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
}

// 响应式设计
@media (max-width: 768px) {
  .data-center {
    padding: 16px;

    .activity-content {
      flex-direction: column;

      .activity-image {
        width: 100% !important;
        height: 200px !important;
        margin-top: 16px;
      }
    }
  }
}
.custom-select {
  width: 160px;  /* 可以根据需要调整宽度 */
}
</style>





<!--
<script>

export default {
  name: "data",
  data() {
    return {
      activities: {},
      currentPage: 1,
      total: 0,
      pageSize: 5
    }
  },
  methods: {
    page(currentPage) {
      const _this = this
      _this.$axios.get("/manager-activity/activitys?currentPage=" + currentPage,{
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res)
        _this.activities = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size

      })
    }
  },
  created() {
    this.page(1)
  }
}
</script>

<template>
  <div class="mcontaner">

    <div class="block">
&lt;!&ndash;      <el-timeline>

        <el-timeline-item :timestamp="activity.created" placement="top" v-for="activity in activities">
          <el-card>
            <h4>
              <router-link :to="{name: 'ActivityDetail', params: {activityId: activity.id}}">
                {{activity.title}}
              </router-link>
            </h4>
            <p>摘要：{{activity.abstract1}}</p>
          </el-card>
        </el-timeline-item>

      </el-timeline>&ndash;&gt;

      <el-timeline>
        <el-timeline-item
            :timestamp="activity.created"
            placement="top"
            v-for="activity in activities"
            :key="activity.id"
        >
          <el-card>
            <div class="activity-card">
              &lt;!&ndash; 左侧部分：标题和创建者 &ndash;&gt;
              <div class="activity-info">
                <h4>
                  <router-link :to="{ name: 'ActivityDetail', params: { activityId: activity.id }}">
                    {{ activity.title }}
                  </router-link>
                  <span class="activity-creator"> - {{ activity.creator }}</span>
                </h4>
                <p>摘要：{{ activity.abstract1 }}</p>
              </div>

              &lt;!&ndash; 右侧部分：图片 &ndash;&gt;
              <div class="activity-image">
                <img :src="activity.picUrls" alt="活动图片" />
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>

      <el-pagination class="mpage"
                     background
                     layout="prev, pager, next"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :total="total"
                     @current-change=page>
      </el-pagination>

    </div>

  </div>
</template>

<style>
.mpage {
  margin: 0 auto;
  text-align: center;
}
.activity-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-info {
  flex: 1;
}

.activity-creator {
  font-size: 14px;
  color: #888;
  margin-left: 10px;
}

.activity-image {
  width: 150px; /* 图片宽度调整 */
  height: 150px; /* 图片高度调整 */
  flex-shrink: 0;
  margin-left: 20px; /* 与文字部分的间距 */
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例适应 */
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}



</style>-->
